<template>
  <div class="songline" id="a">
    <!-- hover的样式 -->
    <div class="hov">
      <div class="empty"></div>
      <!-- # 播放按钮-->
      <span class="span1">
        <!-- start控制当前svg是要关闭还是播放;||后面的条件，通过比对当前播放歌曲的id和此子组件的id来控制avg； -->
        <svg class="icon span1 icon-bofang" v-if="start || song.pic != music.pic" aria-hidden="true">
          <use xlink:href="#icon-bofang"></use>
        </svg>
        <svg class="icon  icon-zanting" v-else aria-hidden="true">
          <use xlink:href="#icon-zanting1"></use>
        </svg>
      </span>
    </div>
    <div class="songlist" :class="col%2==1?`odd`:null">
      <div class="empty"></div>
      <!-- # 序号-->
      <span class="span1" id="spanNone" @click="play(start)">
        <span>{{ col<9?'0'+(col+1):col+1 }}</span>
      </span>
      <!-- 标题 -->
      <div class="span2">
        <img :src="music.pic" alt="">
        <div>
          <span>{{ music.title }}</span><br>
          <span class="h7">{{ music.author }}</span>
        </div>
        <!-- 一图层,伪类样式 -->
        <div class="svg">
          <svg class="icon span1" @click="pushSong" aria-hidden="true">
            <use xlink:href="#icon-xiayishoubofang_liebiao_40"></use>
          </svg>
<el-popover
  placement="right"
  width="220"
  trigger="hover">
  添加到
  <svg slot="reference" class="icon span1" @click="pushSong" aria-hidden="true">
            <use xlink:href="#icon-gedan2"></use>
          </svg>
          <!--  -->
          <el-menu>
           <el-menu-item  v-for="(item, index) in createPL" :key="index" @click="addTolist(item)">
          <img :src="`${url}${item.playlist_coverUrl}`" alt="">
          {{ item.playlist_name}}
          </el-menu-item>
          </el-menu>
</el-popover>
        </div>
      </div>
      <!-- 专辑 -->
      <span class="span3">{{ music.album }}</span>
      <!-- 喜欢 -->
      <span class="span4">
        <svg class="icon cursor" v-if="isLike" @click="delLikeMusic" aria-hidden="true">
          <use xlink:href="#icon-heart"></use>
        </svg>
        <svg class="icon cursor" v-else @click="pushLikeMusic" aria-hidden="true">
          <use xlink:href="#icon-xihuan1"></use>
        </svg>

      </span>
      <!-- 时长 -->
      <span class="span5">{{ music.lrc.split("\n")[music.lrc.split("\n").length-2].substring(1,6) }}</span>
    </div>
  </div>
</template>

<script>
import { url } from "@/apiUrl"//引入地址
import $ from '@/jquery-1.12.4'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      url: "",
      isLike: false,
      src: `${url}/images/image_2107947967.jpg`,
    }
  },
  props: {
    music: {},
    index: '',
    col:null
  },
  created() {
    this.url = `${url}/`
  },
  methods: {
    play(start) {//播放单曲
      if (this.song.pic != this.$props.music.pic || start) {//判断是播放还是暂停
        console.log("点击了播放", this.$props.music);
        this.$store.commit("getSong", this.$props.music)
        this.pushSong()
      } else {
        console.log("点击了暂停");
        this.$store.commit("pause")
      }
    },
    pushSong() {//添加到播放列表
      this.$store.commit("pushSong", this.$props.music);//发送当前的index
    },
    pushLikeMusic() {//添加到我喜欢的音乐
      this.$store.commit("handleAdd",
        {
          value: this.$props.music,
          fieldName: "music_id",
          callback: () => {//更新我喜欢的音乐
            this.$store.commit("getLikeMusic", [() => {
              this.updateLikeMusic()//更新小红心状态
              this.$message("已添加到我喜欢的音乐")
            }])
          }
        }
      )
    },
    updateLikeMusic() {//更新我喜欢的音乐
      this.$store.commit("isLike", [this.music,(flag) => {
        this.isLike = flag
      }])
    },
    delLikeMusic() {//取消收藏我喜欢的音乐
      this.$store.commit("handleDel", {
        fieldValue: this.music,
        fieldName: "music_id",
        callback: () => {//更新我喜欢的音乐
          this.$store.commit("getLikeMusic", [() => {
            this.updateLikeMusic()//更新小红心状态
            this.$message({
              message:"已取消我喜欢的音乐",
              duration:"1422"
            })
          }])
        }
      })
    },
   async addTolist(list){//添加到歌单
      console.log(list);
      var songs=[]
      await this.$axios.get(`${url}/musics/getMusicByPl?playlist_id=${list.playlist_id}`)
      .then(res => {
        songs=res.data.data
      })
        console.log(songs);this.$props.music.music_id
        for(let music of songs){
          if(`${url}/${music.img_url}`==this.$props.music.pic){
            this.$message.error('歌单内歌曲重复');return
          }
        }
      this.$store.commit("addTolist",[list.playlist_id,this.$props.music,()=>{
      this.$message("添加成功")
      this.$store.commit("getCreatePL")//更新封面
      }])
    }
  },
  beforeMount() {
    this.updateLikeMusic()
  },
  beforeUpdate() {
    this.updateLikeMusic()
  },
  computed: {
    ...mapState({
      song: state => state.song,
      start: state => state.start,
      createPL: state => state.createPL
    })
  },
}
</script>

<style lang="scss" scoped>
@import '/src/assets/common.scss';
.listLine{
  margin:1rem;
  border: 1px solid black;
}
.odd{
  background-color:#bfb2d216;
  border-radius:0.7rem;
}
.cursor{
  cursor:pointer;
}
.h7 {
  font-size: 9px;
}

.empty2 {
  width: 53rem;
}

.icon {
  color: gray;
}

.hov {
  display: none;
  position: absolute;
  z-index: -10;
}

.songline:hover .hov {
  .icon-bofang {
    color: #666666;
    margin-left: -1.2rem;
    cursor: pointer;
  }

  .icon-zanting {
    margin-left: -0.5rem;
  }

  margin: 0 1rem;
  display: flex;
  align-items: center;
  background-color:$undercolor-1;
  width: 98.3%;
  height: 100%;
  position: absolute;
  border-radius:0.7rem;
}

.songline:hover #spanNone {
  opacity: 0;
  cursor: pointer;
}

.songline:hover .svg {
  // margin-left: 40rem;
  position: absolute;
  left: 50rem;
  float: right;
  width: 9rem;
  display: block;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.songline {
  user-select: none;
  z-index: 0;
  position: relative; //会导致元素穿透
}

img {
  margin-right: 1rem;
  width: 36px;
  border-radius: 0.4rem;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;}
  .songlist {
  // display: none;
  position: relative; //会导致元素穿透
  margin: 1rem;
  display: flex;
  align-items: center;
}
.empty {
  width: $empty-w;

}

.span1 {
  // margin-left: -0.5rem;
  width: $span1-w;
}

.span2 {
  width: $span2-w;
  display: flex;
  align-items: center;

  .svg {
    display: none;
  }

  span {
    cursor: pointer;
  }
}

.span3 {
  width: $span3-w;
  cursor: pointer;
}

.span4 {
  width: $span4-w;
  font-size: 26px;
}

.span5 {
  width: $span5-w;
}
</style>